<template>
	<div>
		<div class="footer_wrap">
      <!-- router-link可以设置高亮 -->
			<!-- <router-link to="/find">发现音乐</router-link>
			<router-link to="/my">我的音乐</router-link>
			<router-link to="/part?name=小黑">朋友</router-link>
			<router-link to="/part/小吴">朋友</router-link> -->

     <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="one('/part', '小任')">朋友任</span>
      <span @click="two('/part', '小吴')">朋友吴</span>

		</div>
		<div class="top">

<!-- 挂载点 -->
<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
    methods:{
      btn(path,name){
        this.$router.push({
          name,
          params:{
            uname:'嘻嘻'
          }
        })
      },
      //path,params不能一起使用 会有覆盖效果
      one(path,val){
        this.$router.push({
          path,
          query:{
            name:val
          }
        })
      }
    }
  };
</script>

<style scoped>
	.footer_wrap {
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		width: 100%;
		text-align: center;
		background-color: #333;
		color: #ccc;
	}

	.footer_wrap a,
	.footer_wrap span
   {
		flex: 1;
		text-decoration: none;
		padding: 20px 0;
		line-height: 20px;
		background-color: #333;
		color: #ccc;
		border: 1px solid black;
	}

	.footer_wrap a:hover {
		background-color: #555;
	}
	.footer_wrap span:hover {
		background-color: #555;
	}
.footer_wrap .router-link-active {
   color: red;
}
	.top {
		padding-top: 62px;
	}
</style>
